<template>
  <view
    class="flex-col page"
    :style="{ height: isComponent ? '80vh' : '100vh' }"
  >
    <view class="flex-col list">
      <view class="btn-list">
        <view :class="listType == 1 ? 'active' : ''" @click="loadTypeList(1)"
          >距离最近</view
        >
        <view :class="listType == 0 ? 'active' : ''" @click="loadTypeList(0)"
          >优质推荐</view
        >
        <view :class="listType == 2 ? 'active' : ''" @click="loadTypeList(2)"
          >最新入驻</view
        >
      </view>

      <u-skeleton rows="10" :loading="loading" :title="false" rowsHeight="110">
      </u-skeleton>

      <view v-if="productlList.length === 0">
        <zNo :isload="true" @reload="reloadTech"></zNo>
      </view>

      <scroll-view
        :style="{
          height: isComponent ? 'calc(80vh - 59px)' : 'calc(100vh - 59px)',
        }"
        scroll-y="true"
      >
        <view
          class="list-item justify-center"
          :key="i"
          v-for="(item, i) in productlList"
          style="flex-shrink: 0; position: relative"
        >
          <view
            style="
              box-sizing: border-box;
              background-color: #dabc8f;
              position: absolute;
              top: 0;
              left: 0;
              color: #ffffff;
              border-top-left-radius: 12rpx;
              width: 40rpx;
              text-align: center;
              border-bottom-right-radius: 12rpx;
              font-size: 22rpx;
              padding: 1px 4px;
            "
            v-if="item.new || item.label_new"
            >新</view
          >
          <view
            class="left-section flex-col items-center"
            :style="{
              backgroundImage: `url(${item.avatar}?x-oss-process=image/resize,m_fill,quality,q_100,w_400,h_400)`,
              position: 'relative',
              'background-size': '140rpx 140rpx',
            }"
            @click="previewimageavatar(item.avatar)"
            style="height: 140rpx"
          >
            <view
              style="position: absolute; top: -15px; right: 0"
              v-if="item.label_hot"
            >
              <image
                src="https://diaocangdaojia.oss-cn-beijing.aliyuncs.com/img/hot.gif"
                class="label_hot"
                mode="widthFix"
              ></image>
            </view>

            <view
              style="position: absolute; bottom: -10px; right: 0"
              v-if="item.label_excellent"
            >
              <image
                src="https://diaocangdaojia.oss-cn-beijing.aliyuncs.com/img/9e353c559b63b4cdb7cfce6c94bcf037.gif"
                class="label_excellent"
                mode="widthFix"
              ></image>
            </view>
            <view class="ul1" v-if="item.yue == 1 && item.work_status"
              >可服务</view
            >
            <view class="ul4" v-else-if="item.yue == 2 && item.work_status"
              >可预约</view
            >
            <view class="ul2" v-else>服务中</view>
          </view>

          <view class="center-group flex-col">
            <view class="group_4 flex-row">
              <text class="text_5 text_6">{{ item.realname }}</text>
              <text class="moreImg" @click="preview(item.album)">生活照</text>
            </view>
            <view class="group_5 flex-row flex ane">
              <u-icon
                v-for="(sitem, sindex) in 1"
                :key="sindex"
                name="star-fill"
                size="16"
                color="#ff6100"
              >
              </u-icon>
              <text class="text_7">{{ item.praise }}</text>
              <text class="t8">已服务：{{ item.sales }} 单</text>
            </view>

            <view class="group_7 flex-row">
              <view
                style="display: flex; align-items: center"
                @click="toTeinfoall(item.id)"
              >
                <image src="../../static/my/s.png" class="image_13" />
                <text class="text_12 text_13">{{ item.shop_name }}</text>
              </view>

              <image src="../../static/my/p.png" class="image_15" />
              <text class="text_14 text_15">{{ item.comment }}</text>
              <image
                v-if="item.collect"
                src="../../static/my/itemc.png"
                class="image_17"
                @click="changeCollect(item, i, 0)"
              />
              <image
                v-else
                src="../../static/my/s1.png"
                class="image_17"
                @click="changeCollect(item, i, 1)"
              />
              <text class="text_16 text_17">{{ item.collectCount }}</text>
            </view>
          </view>
          <view class="right-group flex-col">
            <view
              class="flex ane image_71txt"
              style="justify-content: flex-end"
            >
              <image src="../../static/my/d.png" class="image_71" />
              <text class="text_19">{{ item.distance }}km</text>
            </view>
            <view
              class="bottom-text-wrapper flex-col items-center"
              @click="toPath(item)"
              v-if="item.yue == 1 && item.work_status"
            >
              <text>立即下单</text>
            </view>
            <view
              class="bottom-text-wrapper flex-col items-center"
              @click="toPath(item)"
              v-else-if="item.yue == 2 && item.work_status"
            >
              <text>立即预约</text>
            </view>
            <view
              class="bottom-text-wrapper flex-col items-center gayer"
              @click="toPath(item)"
              v-else
            >
              <text>正在上钟</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <preview-image-vue ref="previewImageRef"></preview-image-vue>
  </view>
</template>

<script>
import zNo from "@/components/z-no/index.vue";
import previewImageVue from "@/components/previewImage/previewImage.vue";
import {
  checkSystemEnableLocation,
  requestAndroidPermission,
} from "@/js_sdk/wa-permission/permission.js";
export default {
  props: ["jishishow"],
  data() {
    return {
      loading: true,
      listType: 1,
      productlList: [],
      latitude: "",
      longitude: "",
      value: "",
      dataList: [],
      total: null,
      page: 1,
      name: "",
      shownone: false,
      isload: false,
      loadTech: false,
      isLoadData: false,
      isComponent: false,
    };
  },
  components: {
    zNo,
    previewImageVue,
  },
  onLoad(options) {
    this.isload = true;
    var self = this;
    let { name } = options;
    if (name) {
      this.name = name;
    }
    // uni.setStorageSync('location',{"lat":29.552672,"lng":106.568951,"time":1761725006405})
    let location = uni.getStorageSync("location");
    if (location) {
      (self.latitude = location.lat), (self.longitude = location.lng);
      self.init();
      self.loadTech = true;
    } else {
      this.loading = false;
    }
  },
  methods: {
    saveLocation(lat, lng) {
      this.$http
        .post("api/wechat/getMapAddress", {
          location: `${lat},${lng}`,
        })
        .then((address) => {
          let { ad_info, address: street } = address.result;
          let { location } = ad_info;
          ad_info.latitude = location.lat;
          ad_info.longitude = location.lng;
          ad_info.address = street;

          ad_info.lat = location.lat;
          ad_info.lng = location.lng;

          this.latitude = location.lat;
          this.longitude = location.lng;

          uni.setStorageSync("address_info", ad_info);
          uni.setStorageSync("location", location);

          this.init();
        });
    },
    reloadTech() {
      const isPermisi = checkSystemEnableLocation();
      if (isPermisi) {
        uni.getLocation({
          type: "wgs84",
          highAccuracy: true,
          success: (res) => {
            this.saveLocation(res.latitude, res.longitude);
          },
        });
      } else {
        uni.showModal({
          title: "提示",
          content: "您未开启定位，无法准确分配附近技师",
        });
      }
    },
    diffTime(t) {
      if (t.indexOf("-") != -1) {
        return 1;
      }
      var date = new Date();
      var now = date.getTime();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      var hour = date.getHours();
      var min = date.getMinutes();
      var sec = date.getSeconds();
      var tDate = new Date(
        year,
        month - 1,
        day,
        t.split(":")[0],
        t.split(":")[1]
      );
      var tTime = tDate.getTime();
      var diff = tTime - now;
      var diffInHours = diff / (1000 * 60 * 60);
      if (diffInHours <= 1) {
        // console.log('当前时间和t的时间差在一个小时以内！');
        return 0;
      } else {
        return 1;
      }
    },
    changeCollect(e, index, type) {
      var that = this;
      this.$http
        .post("api/collect/collect", {
          technician_id: e.technician_id ? e.technician_id : e.id,
        })
        .then((res) => {
          that.productlList[index].collect = !that.productlList[index].collect;
          if (type == 0) {
            that.productlList[index].collectCount--;
          } else {
            that.productlList[index].collectCount++;
          }
          that.init();
        });
    },
    toTeinfoall(id) {
      uni.navigateTo({
        url: "/bundle/pages/home/teinfo?id=" + id,
      });
    },
    previewimageavatar(imageUrl) {
      //预览图片
      this.check_user_login(() => {
        var images = [];
        images.push(imageUrl);
        images = this.Commond.imgurlreplace(images);
        uni.previewImage({
          // 图片路径必须是一个数组 => ['']
          current: 0,
          urls: images,
        });
      });
    },
    preview(imageUrl) {
      this.check_user_login(() => {
        imageUrl = this.Commond.imgurlreplace(imageUrl);
        uni.previewImage({
          urls: imageUrl,
        });
      });
    },
    check_user_login(callback) {
      this.$emit("updatejishishow", false);
      const islogin = uni.getStorageSync("userInfo");
      if (islogin) {
        callback();
      } else {
        uni.showModal({
          title: "提示",
          content: "您还未登录，请先登录~",
          confirmText: "去登录",
          cancelText: "再逛会",
          success: (res) => {
            if (res.confirm) {
              uni.navigateTo({
                url: "/pages/user/login22",
              });
            }
          },
        });
      }
    },
    previewimage(imageUrl) {
      //预览图片
      this.check_user_login(() => {
        var images = [];
        images.push(imageUrl);
        imageUrl = this.Commond.imgurlreplace(imageUrl);
        uni.previewImage({
          // 图片路径必须是一个数组 => ['']
          current: 0,
          urls: imageUrl,
        });
      });
    },
    loadTypeList(i) {
      if (this.listType == i) {
        return;
      }
      this.listType = i;
      this.init();
    },
    init() {
      let order_info = uni.getStorageSync("order_info");
      this.isLoadData = false;
      this.productlList = [];
      this.$http
        .post("api/technician/newlist", {
          lat: this.latitude,
          lng: this.longitude,
          realname: this.value,
          service_id: order_info.service_id,
          type: this.listType,
          page: this.page,
        })
        .then((res) => {
          if (res) {
            this.productlList = res.list;
            this.isLoadData = res.list?.length < 1 ? true : false;
          }
          this.loading = false;
          // uni.hideLoading()
        })
        .catch((Error) => {
          uni.showToast({
            title: "技师获取失败",
            icon: "error",
          });
          // uni.hideLoading()
        });
    },
    toPath(item) {
      if (Number(item.yue) == 0) {
        uni.showToast({
          title: "该技师正在上钟",
          icon: "none",
        });
        return;
      }
      let order_info = uni.getStorageSync("order_info");
      order_info.technician_id = item.id;
      uni.setStorageSync("order_info", order_info);
      uni.navigateTo({
        url: `/pages/confirm_order/confirm_order?id=${item.id}`,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.page {
  background-color: #f7f7f7;
  height: 100vh;
  width: 100%;

  .comment-cont {
    height: 90rpx;
    background-color: white;
    margin-top: 17rpx;
    border-radius: 18rpx;
    display: flex;
    align-items: center;
    padding: 0 20rpx;

    view {
      flex: 1;
      display: flex;
      align-items: center;
      height: 90rpx;
      color: #333333;
      font-size: 24rpx;

      image {
        margin-right: 10rpx;
        width: 26rpx;
      }
    }
  }

  .info-head {
    background-color: #f7f7f7;
    padding: 25rpx 20rpx 0 20rpx;

    .head-wrpper {
      height: 200rpx;
      background: #ffffff;
      border-radius: 18rpx;
      border: 2rpx solid rgb(56, 152, 124);

      .section_2 {
        padding: 20rpx;

        .image {
          margin-right: 10rpx;
        }

        .text-group_6 {
          .section_4 {
            width: 500rpx;
            justify-content: space-around;
            margin-top: 10rpx;

            .icon_3 {
              width: 25rpx;
              height: 25rpx;
              margin-top: 3rpx;
              margin-right: 8rpx;
            }

            .text_1 {
              font-size: 24rpx;
            }
          }

          .paragraph_1 {
            font-size: 24rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            color: #767676;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2; // 想要超出三行显示 就把这里改成3就好了
          }
        }
      }
    }

    .center-wrpper {
      margin-top: 20rpx;
      justify-content: space-around;
      height: 700rpx;
      overflow-y: scroll;

      .comment {
        padding: 20rpx;
        background: #ffffff;
        color: #767676;
        border-radius: 18rpx;
        margin-bottom: 20rpx;
        font-size: 27rpx;

        .comment1 {
          font-size: 26rpx;
        }

        .comment2 {
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #767676;
          padding: 5rpx 0;
        }

        .comment3 {
          flex-wrap: wrap;

          .comment3-item {
            padding: 5rpx 20rpx;
            background: #efefef;
            border-radius: 5rpx;
            margin-right: 16rpx;
            margin-top: 10rpx;
            color: #767676;
          }
        }
      }

      .item-wrpper {
        padding: 20rpx;
        background: #ffffff;
        border-radius: 18rpx;
        margin-bottom: 20rpx;

        .icon_6 {
          margin-top: 20rpx;
          width: 100rpx;
          height: 50rpx;
          font-size: 28rpx;
          line-height: 50rpx;
          text-align: center;
          color: #ffffff;
          background: rgb(56, 152, 124);
          border-radius: 14rpx;
        }

        .group_2 {
          margin-left: 20rpx;
          width: 400rpx;

          .left-group {
            // margin-top: 14rpx;
            white-space: nowrap;
            // height: 44rpx;

            .text_16 {
              color: #ff6100;
              font-size: 24rpx;
            }

            .price-font1 {
              font-size: 22rpx;
              color: #727272;
              margin-left: 8rpx;
            }

            .text_14 {
              font-size: 22rpx;
              color: #727272;
            }

            .text_18 {
              font-family: Price-Bold;
              color: #ff6100;
              font-size: 32rpx;
            }
          }

          .text-wrapper_2 {
            .title {
              font-size: 30rpx;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              color: #333333;
            }

            .title1 {
              font-size: 22rpx;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #727272;
              margin-left: 10rpx;
              margin-top: 8rpx;
            }
          }
        }
      }
    }
  }

  .no {
    padding-top: 300rpx;
  }

  .search_wrapper {
    padding: 0rpx 32rpx 20rpx;
    // background-color: rgb(49, 208, 129);
    background: #fff;

    .search {
      padding: 10rpx 0rpx;
      background-color: rgb(255, 255, 255);
      border-radius: 32rpx;

      .image {
        width: 44rpx;
        height: 44rpx;
      }

      .text {
        color: #333;
        font-size: 28rpx;
        line-height: 50rpx;
        white-space: nowrap;
      }

      .text_1 {
        margin-left: 24rpx;
        color: rgb(153, 153, 153);
        font-size: 28rpx;
        line-height: 40rpx;
        white-space: nowrap;
      }
    }
  }

  .section_1 {
    padding: 0 32rpx 250rpx;
    .group_1 {
      margin-top: 15rpx;
      color: rgb(255, 255, 255);
      font-size: 28rpx;
      line-height: 40rpx;
      white-space: nowrap;

      .group_3 {
        margin-left: 54rpx;

        .image_4 {
          margin-bottom: 4rpx;
          width: 28rpx;
          height: 34rpx;
        }

        .text_3 {
          margin-left: 14rpx;
        }
      }

      .image_3 {
        width: 40rpx;
        height: 40rpx;
      }

      .text_2 {
        margin-left: 8rpx;
      }
    }
  }

  .list {
    padding: 0 32rpx;
    position: relative;
    .list-item {
      padding: 20rpx;
      padding-left: 10rpx;
      background-color: rgb(255, 255, 255);
      border-radius: 28rpx;
      height: 230rpx;

      &:not(:first-of-type) {
        margin-top: 20rpx;
      }
      &:last-of-type {
        margin-bottom: 20rpx;
      }

      .left-section {
        padding-top: 140rpx;
        color: rgb(255, 255, 255);
        font-size: 24rpx;
        line-height: 34rpx;
        white-space: nowrap;
        border-radius: 50%;

        background-position: 0px 0px;
        background-size: cover;
        background-repeat: no-repeat;
        width: 140rpx;
        // height: 140rpx;
        position: relative;

        .image_5 {
          width: 35rpx;
          height: 22rpx;
          position: absolute;
          right: 0;
          top: 0;
        }

        .text-wrapper {
          padding-bottom: -20rpx;
          background-color: rgb(24, 181, 103);
          border-radius: 18rpx;
          padding: 0 10rpx;
          font-size: 23rpx;
          position: relative;
        }
      }

      .center-group {
        margin-left: 16rpx;
        flex: 1;
        display: flex;
        justify-content: space-between;
        padding: 15rpx 0 4rpx 0;

        .group_4 {
          color: rgb(0, 0, 0);
          font-size: 32rpx;
          font-weight: 500;
          line-height: 44rpx;
          white-space: nowrap;

          .text_5 {
            color: rgb(0, 0, 0);
            font-size: 32rpx;
            font-weight: 500;
            line-height: 44rpx;
            white-space: nowrap;
          }

          .text_6 {
            color: #333;
            font-size: 30rpx;
            font-weight: 600;
            line-height: initial;
            white-space: initial;
          }

          .image_7 {
            margin: 4rpx 0 4rpx 8rpx;
            width: 32rpx;
            height: 32rpx;
          }
        }

        .group_5 {
          margin-top: 0rpx;
          color: rgb(153, 153, 153);
          font-size: 20rpx;
          line-height: 28rpx;
          white-space: nowrap;

          .image_9 {
            width: 80rpx;
            height: 24rpx;
          }

          .image_11 {
            margin-left: 4rpx;
            width: 52rpx;
            height: 24rpx;
          }

          .text_7 {
            margin-left: 8rpx;
            font-size: 26rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ff6100;
            margin-right: 6px;
          }
        }

        .group_6 {
          margin-top: 0rpx;
          color: rgb(243, 151, 53);
          font-size: 22rpx;
          line-height: 34rpx;
          white-space: nowrap;

          .left-text-wrapper {
            padding: 2rpx 0 4rpx;
            background-color: rgba(243, 151, 53, 0.16);
            border-radius: 8rpx;
            height: 30rpx;

            .text_9 {
              margin-left: 12rpx;
              margin-right: 10rpx;
            }
          }

          .right-text-wrapper {
            margin-left: 8rpx;
            padding: 2rpx 10rpx 4rpx;
            background-color: rgba(243, 151, 53, 0.16);
            border-radius: 8rpx;
            height: 40rpx;
          }
        }

        .group_7 {
          margin-top: 16rpx;
          color: rgb(153, 153, 153);
          font-size: 20rpx;
          line-height: 28rpx;
          white-space: nowrap;

          .image_13 {
            width: 28rpx;
            height: 33rpx;
            margin-right: 8rpx;
          }

          .text_12 {
            margin-left: 4rpx;
          }
          .text_13 {
            margin-left: initial;
            color: #727272;
            font-size: 24rpx;
          }
          .image_15 {
            margin-left: 18rpx;
            width: 32rpx;
            height: 32rpx;
            margin-right: 8rpx;
          }

          .text_14 {
            margin-left: 4rpx;
          }

          .text_15 {
            margin-left: initial;
            font-size: 24rpx;
            color: #727272;
          }

          .image_17 {
            margin-right: 8rpx;
            width: 36rpx;
            height: 30rpx;
            margin-left: 17rpx;
          }

          .text_16 {
            margin-left: 0rpx;
            font-size: 24rpx;
            color: #727272;
          }

          .text_17 {
            margin-left: initial;
          }
        }
      }

      .right-group {
        // margin-left: 10rpx;
        // margin-right: 24rpx;
        display: flex;
        justify-content: space-between;
        padding: 15rpx 0 0rpx 0;
        position: relative;

        .top-text-wrapper {
          padding: 4rpx 10rpx 2rpx;
          line-height: 34rpx;
          white-space: nowrap;
          background: #e5fdf5;
          border-radius: 9rpx;
          font-size: 24rpx;
          font-family: PingFangSC-Semibold, PingFang SC;
          position: absolute;
          right: 0;
        }

        .opacity-0 {
          opacity: 0;
        }

        .text_19 {
          // margin-top: 10rpx;
          // align-self: flex-end;
          color: #333;
          font-size: 26rpx;

          white-space: nowrap;
        }

        .bottom-text-wrapper {
          align-self: flex-end;
          color: rgb(255, 255, 255);
          font-size: 26rpx;

          white-space: nowrap;
          background-image: linear-gradient(
            116.3deg,
            rgb(53, 219, 160) 0%,
            rgb(53, 219, 160) -13.77%,
            rgb(24, 181, 103) 111.69%,
            rgb(24, 181, 103) 100%
          );
          width: 156rpx;
          height: 60rpx;
          background: rgb(56, 152, 124);
          border-radius: 12rpx;
          line-height: 60rpx;
          position: absolute;
          right: 0;
          bottom: 0;
        }
        .yuyue {
          background: #ffffff;
          border: #38987c 1px solid;
          color: #38987c;
        }
        .gayer {
          background: rgba(228, 228, 228, 1);
        }
      }
    }
  }
}

.pos {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.36);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 28rpx;
  border-radius: 50%;
}

// .unab /deep/ .uni-nav-bar-text {
// 	font-size: 36rpx;
// 	font-family: PingFangSC-Semibold, PingFang SC;
// 	font-weight: 600;
// 	color: #333333;
// }

.b5 {
  width: 535rpx;
  height: 80rpx;
  background: #f5f5f5;
  border-radius: 28rpx;
  background: #f5f5f5;
  display: flex;
  align-items: center;
}

.rows1 {
  align-items: center;
}

.label_hot {
  width: 27px;
}
.label_excellent {
  width: 27px;
}

.imgLey {
  -webkit-animation-name: scaleDraw;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 2.5s;
}

@keyframes scaleDraw {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(1.2);
  }

  50% {
    transform: scale(1);
  }

  75% {
    transform: scale(1.2);
  }
}

.ul1 {
  width: 128rpx;
  height: 42rpx;
  background: rgb(56, 152, 124);
  border-radius: 21rpx;
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  line-height: 42rpx;
  margin-top: 12rpx;
}
.ul4 {
  width: 128rpx;
  height: 42rpx;
  color: rgb(56, 152, 124);
  border: rgb(56, 152, 124) 1px solid;
  background-color: #fff;
  border-radius: 21rpx;
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  text-align: center;
  line-height: 42rpx;
  margin-top: 12rpx;
}

.ul2 {
  width: 128rpx;
  height: 42rpx;
  //background: rgb(56, 152, 124);
  border-radius: 21rpx;
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #797979;
  border: #797979 solid 2rpx;
  text-align: center;
  line-height: 42rpx;
  margin-top: 12rpx;
}

.ul3 {
  width: 128rpx;
  height: 42rpx;
  border-radius: 21px;
  border: 1px solid #727272;
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #727272;
  text-align: center;
  line-height: 42rpx;
  margin-top: 7rpx;
}

.moreImg {
  width: 114rpx;
  height: 42rpx;
  color: rgb(56, 152, 124);
  border: rgb(56, 152, 124) 1px solid;
  background-color: #fff;
  border-radius: 9rpx;
  display: inline-block;
  margin-left: 15rpx;
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  text-align: center;
  line-height: 42rpx;
}

.t8 {
  font-size: 26rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #727272;
}

.image_71 {
  width: 22rpx;
  height: 26rpx;
  margin-right: 7rpx;
  margin-top: 6rpx;
}

.image_71txt {
  color: #333;
  font-size: 26rpx;
}

.image_6 {
  margin: 4rpx 0;
  width: 32rpx;
  height: 32rpx;
}

.image_5 {
  width: 24rpx;
  height: 24rpx;
  margin-left: 14rpx;
  margin-right: 3rpx;
}
.btn-list {
  display: flex;
  justify-content: flex-start;
  padding: 12px 0;
  font-size: 13px;
}
.btn-list > view {
  padding: 4px 8px;
  background-color: #fff;
  border-radius: 6px;
  margin-right: 16px;
}
.btn-list .active {
  color: #38987c;
  border: #38987c 1px solid;
}
</style>
